---
title: 테마 설정
description: 테마 사용 및 맞춤화
---

# 테마 설정

## 테마 사용 및 맞춤화

RainbowKit UI를 브랜드와 일치하도록 조정할 수 있습니다. 사전 정의된 몇 가지 강조색상 및 테두리 반경 설정에서 선택할 수 있습니다.

3개의 기본 테마 함수가 있습니다:

- `lightTheme` &nbsp; (기본값)
- `darkTheme`
- `midnightTheme`

테마 함수는 테마 객체를 반환합니다. 해당 객체를 `RainbowKitProvider`의 `theme` 속성에 전달할 수 있습니다.

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

export const App = () => (
  <RainbowKitProvider theme={darkTheme()} {...etc}>
    {/* Your App */}
  </RainbowKitProvider>
);
```

원하는 경우 `accentColor`, `accentColorForeground`, `borderRadius`, `fontStack`, 및 `overlayBlur`를 전달하여 설정을 맞춤화할 수 있습니다.

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

export const App = () => (
  <RainbowKitProvider
    theme={darkTheme({
      __accentColor__: '#7b3fe4',
      __accentColorForeground__: 'white',
      __borderRadius__: 'small',
      __fontStack__: 'system',
      __overlayBlur__: 'small',
    })}
    {...etc}
  >
    {/* Your App */}
  </RainbowKitProvider>
);
```

### 내장 테마 맞춤화

기본 제공되는 테마 함수는 여러 다른 시각 스타일 중에서 선택할 수 있는 옵션 객체도 수용합니다.

<PropsTable
  data={[
    {
      name: 'accentColor',
      required: false,
      default: '"#0E76FD"',
      type: 'string',
      description:
        '다양한 인터랙티브 요소의 배경/텍스트 색상.',
    },
    {
      name: 'accentColorForeground',
      required: false,
      default: '"white"',
      type: 'string',
      description:
        '강조 색상 위에 렌더링되는 전경 요소의 색상.',
    },
    {
      name: 'borderRadius',
      required: false,
      default: 'large',
      type: '"none" | "small" | "medium" | "large"',
      typeSimple: 'enum',
      description: '전체 테두리 반경 스케일의 크기.',
    },
    {
      name: 'fontStack',
      required: false,
      default: 'rounded',
      type: '"rounded" | "system"',
      typeSimple: 'enum',
      description:
        "UI 전반에 사용되는 폰트 스택입니다. `rounded`는 SF Pro Rounded를 사용하며, 사용할 수 없는 경우 시스템 폰트로 대체됩니다.",
    },
    {
      name: 'overlayBlur',
      required: false,
      default: 'none',
      type: '"large" | "small" | "none"',
      typeSimple: 'enum',
      description: '모달 배경 블러.',
    },
  ]}
/>

예를 들어, 보라색 강조 색상과 `medium` 테두리 반경 스케일로 어두운 테마를 맞춤화하려면:

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        accentColor: '#7b3fe4',
        accentColorForeground: 'white',
        borderRadius: 'medium',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

각 테마는 옵션 객체에 확산할 수 있는 몇 가지 강조 색상 프리셋(`blue`, `green`, `orange`, `pink`, `purple`, `red`)을 제공합니다. 예를 들어, `pink` 강조 색상 프리셋을 사용하려면:

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        ...darkTheme.accentColors.pink,
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

### 예시들

#### 테마 함수

다음은 `theme` 속성을 사용할 수 있는 몇 가지 방법입니다.

`darkTheme` 테마를 사용합니다.

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

export const App = () => (
  <RainbowKitProvider theme={darkTheme()} {...etc}>
    {/* Your App */}
  </RainbowKitProvider>
);
```

`midnightTheme` 테마를 사용합니다.

```tsx
import {
  RainbowKitProvider,
  midnightTheme,
} from '@rainbow-me/rainbowkit';

export const App = () => (
  <RainbowKitProvider theme={midnightTheme()} {...etc}>
    {/* Your App */}
  </RainbowKitProvider>
);
```

#### 강조 색상

다음은 `accentColor` 설정을 사용할 수 있는 몇 가지 방법입니다.

강조 색상을 사용자 정의 보라색 값으로 설정합니다.

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        accentColor: '#7b3fe4',
        accentColorForeground: 'white',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

강조 색상을 기본 제공 `green` 프리셋으로 설정합니다.

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        ...darkTheme.accentColors.green,
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

#### 테두리 반경

다음은 `borderRadius` 설정을 사용할 수 있는 방법입니다.

테두리 반경을 `medium`으로 설정합니다.

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        borderRadius: 'medium',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

테두리 반경을 `none`으로 설정합니다.

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        borderRadius: 'none',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

> 알림: 사용 가능한 테두리 반경 값은: `large` (기본값), `medium`, `small`, `none`입니다.

#### 폰트 스택

기본적으로 `fontStack`는 `rounded`로 설정되지만, `fontStack` 설정을 사용할 수 있는 방법은 다음과 같습니다.

폰트 스택을 `system`으로 설정합니다.

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        fontStack: 'system',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

#### 블러 효과 오버레이

기본적으로 `overlayBlur`는 `none`으로 설정되지만, `overlayBlur` 설정을 사용하는 방법은 다음과 같습니다.

블러 효과 오버레이를 `small`로 설정합니다.

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        overlayBlur: 'small',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

#### 혼합 및 매칭

다음은 `accentColor`, `borderRadius`, `fontStack` 속성을 함께 사용하여 다양한 테마를 혼합하여 사용할 수 있는 몇 가지 방법입니다.

- `lightTheme` 테마를 사용합니다.
- 강조 색상을 사용자 정의 보라색 값으로 설정합니다.
- 테두리 반경을 `medium`으로 설정합니다.
- 폰트 스택을 `system`으로 설정합니다.

```tsx
import { RainbowKitProvider, lightTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={lightTheme({
        accentColor: '#7b3fe4',
        accentColorForeground: 'white',
        borderRadius: 'medium',
        fontStack: 'system',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

- `midnightTheme` 테마를 사용합니다.
- 강조 색상을 기본 제공 `pink` 프리셋으로 설정합니다.
- 테두리 반경을 `small`으로 설정합니다.
- 폰트 스택을 `system`으로 설정합니다.

```tsx
import {
  RainbowKitProvider,
  midnightTheme,
} from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={midnightTheme({
        ...midnightTheme.accentColors.pink,
        borderRadius: 'small',
        fontStack: 'system',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

#### 다크 모드 지원

앱이 표준 `prefers-color-scheme: dark` 미디어 쿼리를 사용하여 라이트 및 다크 모드를 전환하는 경우, `lightMode` 및 `darkMode` 값을 포함하는 동적 테마 객체를 선택적으로 제공할 수 있습니다.

```tsx
import {
  RainbowKitProvider,
  lightTheme,
  darkTheme,
} from '@rainbow-me/rainbowkit';

const App = () => (
  <RainbowKitProvider
    theme={{
      lightMode: lightTheme(),
      darkMode: darkTheme(),
    }}
    {...etc}
  >
    {/* Your App */}
  </RainbowKitProvider>
);
```
